<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>答题界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .header {
            width: 100%;
            height: 50px;
            background-color: #8a60d9;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            margin-left: 160px;
            font-size: 31px;
            cursor: pointer;
            /* 鼠标悬停时显示为手型 */
        }

        .nav-links {
            margin-left: -200px;
            display: flex;
            flex-grow: 0.3;
            /* 让这个容器占据剩余空间 */
        }

        .header a {
            display: inline-block;
            color: white;
            text-decoration: none;
            font-size: large;
            line-height: 50px;
            text-align: center;
            flex: 1;
            /* 让每个链接根据内容自动调整宽度 */
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;
            /* 使用省略号表示超出部分 */
            margin: 0 6px;
            /* 减少链接之间的间距 */
        }

        .header a:hover {
            background-color: #f5f5f5;
            color: rgb(20, 19, 19);
        }

        .main {
            padding: 20px;
            text-align: center;
            padding: 4rem 5%;
            background: linear-gradient(135deg, #9919ad5e, #976ce9);
            color: white;
        }

        .main.section {
            background-color: white;
            padding: 20px;
            margin-bottom: 10px;
            /* 减少各部分之间的间距 */
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            bottom: 0;
        }

        .section {
            margin-bottom: 10px;
            /* 减少各部分之间的间距 */
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .section h2 {
            margin-top: 0;
            color: #8a60d9;
        }

        .section ul {
            list-style-type: none;
            padding: 0;
        }

        .section li {
            margin-bottom: 5px;
            /* 减少列表项之间的间距 */
        }

        .section li:before {
            content: "•";
            color: #8a60d9;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }

        .nav1 {
            display: flex;
            align-items: center;
            margin-right: 160px;
        }

        .search {
            position: relative;
        }

        .js-input {
            width: 180px;
            height: 30px;
            line-height: 40px;
            font-size: 14px;
            padding: 0 15px;
            border: 1px solid #ccc;
            border-radius: 20px;
            outline: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .js-suggest {
            width: 466px;
            font-size: 14px;
            border: 1px solid #cccccc;
            background: #ffffff;
            left: 220px;
            top: 39px;
        }

        .js-suggest.hide {
            display: none;
        }

        .js-suggest ul {
            display: block;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .js-suggest ul li {
            color: #000;
            font: 14px arial;
            line-height: 25px;
            padding: 0 8px;
            position: relative;
            cursor: default;
        }

        .js-suggest ul li:hover {
            background: #f0f0f0;
        }

        .btn {
            height: 40px;
            border-radius: 20px;
            padding: 0 20px;
            background-color: #8a60d9;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #6f42c1;
        }

        .btn1 {
            height: 40px;
            border-radius: 20px;
            padding: 0 20px;
            background-color: #8a60d9;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .btn1:hover {
            background-color: #6f42c1;
        }

        .btn1 a:hover {
            background-color: transparent;
            color: white;
        }

        h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .main p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

        .start-btn {
            background-color: #ff6b6b;
            color: white;
            border: none;
            padding: 13px 25px;
            font-size: 1.2rem;
            border-radius: 25px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .start-btn:hover {
            transform: scale(1.05);
        }

        .features {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            margin: 20px 0;
            /* background-color: #fff; */
            flex-wrap: wrap;
        }

        .feature-card {
            width: 300px;
            padding: 2rem;
            margin: 1rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .feature-icon {
            font-size: 2.5rem;
            color: #8a60d9;
            margin-bottom: 1rem;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head>

<body>
    <!-- 头部导航栏 -->
    <div class="header">
        <h1 onclick="window.location.href='/'">牛客网</h1>
        <div class="nav-links">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a href="/">竞赛</a>
            <a href="/">求职</a>
            <a href="/">社区</a>
            <a href="/">学习</a>
        </div>
        <div class="nav1">
            <!-- 搜索 -->
            <form class="form-inline my-2 my-lg-0" method="get" th:action="@{/search}">
                <input class="js-input" type="search" aria-label="Search" name="keyword" th:value="${keyword}" />
                <button class="btn" type="submit">搜索</button>
            </form>
            <button class="btn1">
                <a href="http://127.0.0.1:5500/%E7%94%A8%E6%88%B7%E7%AB%AF/%E7%99%BB%E5%BD%95/html/index.html">登录/注册</a>
            </button>
        </div>
    </div>
    <!-- 主内容区 -->
    <section class="main">
        <h2>欢迎来到智能答题系统</h2>
        <p>专业在线测评平台 | 海量精选题库 | 实时学习分析</p>
        <button class="start-btn">立即开始答题 →</button>
    </section>

    <!-- 功能特色 -->
    <section class="features">
        <div class="feature-card">
            <i class="fas fa-brain feature-icon"></i>
            <h3>智能组卷</h3>
            <p>根据你的学习水平智能生成个性化试卷</p>
        </div>
        <div class="feature-card">
            <i class="fas fa-chart-line feature-icon"></i>
            <h3>学习分析</h3>
            <p>详细的数据统计和学习建议助你快速提升</p>
        </div>
        <div class="feature-card">
            <i class="fas fa-trophy feature-icon"></i>
            <h3>竞赛模式</h3>
            <p>参与实时答题竞赛，挑战全国学霸</p>
        </div>
    </section>

    <!-- 底部信息 -->
    <div class="footer">版权所有 © 牛客网</div>
</body>

</html>